<template>
  <div class="NavBody">
    <div class="box">
      <div>
<!--        <span class="item" @click="$router.push('/')"><img style="width: 80px;" src="../../static/img/test01.png" alt=""></span>-->
        <span class="item" @click="$router.push('/')">{{$t("navModel.home")}}</span>
        <span class="item"  @click="$router.push('/about')">{{$t("navModel.about")}}</span>
        <span class="item" @click="$router.push('/device')">{{$t("navModel.equipment")}}</span>
        <span class="item" @click="$router.push('/serviceIdea')">{{$t("navModel.service")}}</span>
        <span class="item" @click="$router.push('/partners')">{{$t("navModel.body")}}</span>
        <div class="item">
          <el-dropdown trigger="click" @command="setLanguage">
						<span style="color: #333333;font-size: 18px;">
							{{languages[language]}}
							<i class="el-icon-arrow-down el-icon--right"></i>
						</span>
            <el-dropdown-menu slot="dropdown" class="el-dropdown-menu">
              <el-dropdown-item class="el-dropdown-item" command="zh"><span>中文</span></el-dropdown-item>
              <el-dropdown-item class="el-dropdown-item" command="en"><span>English</span></el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      language: "zh",
      languages: {
        "zh": "中文",
        "en": "English"
      },
      activeIndex: '/body',
      i:0
    }
    },
  methods:{
    // // 切换语言
    setLanguage(i) {
      this.language = i
      this.$i18n.locale = i
    },
    scrolling: function () {
      var scrollTop = document.documentElement.scrollTop
      var box = document.querySelector(".box");

      var scroll = scrollTop - this.i;
      this.i = scrollTop;

      // console.log("scrollTop", scroll)
      if (scroll < 0 ){
        box.style.animation = "nav-top 0.3s ease-in"
        box.style.animationFillMode = "both"
        if (scrollTop == 0){
          box.style.backgroundColor = "transparent"
        }else {
          box.style.backgroundColor = "#fff"
        }
      }else {
        box.style.animation = "nav-btm 0.3s ease-in"
        box.style.animationFillMode = "both"
      }
    }
  },
  mounted() {
    window.addEventListener("scroll",this.scrolling);
  }
}
</script>

<style scoped>

.box {
  display: flex;
  width: 100%;
  height:60px;
  background-color: transparent;
  justify-content: space-around;
  transition: all 1s;
}
.box:hover{
  background-color: rgba(0,0,0,20%);
}

.item{
  display: inline-block;
  font-family: Fy;
  text-align: center;
  line-height: 60px;
  width: 150px;
  height:100%;
  font-size: 18px;
  position: relative;
  cursor: pointer;
  color: #333333;
  font-weight: bolder;
}
.item:after {
  display: block;
  content: '';
  width: 0;
  height: 4px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background-color: transparent;
  transition: all 0.3s;
}
.item:hover:after {
  display: block;
  content: '';
  width: 80%;
  height: 2px;
  background-color: #333333;
  transition: all 0.3s;
}

</style>